<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<button>下载</button>
<script>
    var cas = document.querySelector("canvas");
    var btn = document.querySelector("button");
    var ctx = cas.getContext("2d");

    var isDraw = false;
    ctx.fillStyle="white";
    ctx.fillRect(0,0,600,600);
    cas.onmousedown=function(e){
        isDraw=true;
        ctx.beginPath();
    }

    cas.onmousemove=function(e){
        if(!isDraw){
            return;
        }
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke()

    }
    cas.onmouseup=function(e){
        isDraw = false;

    }
    cas.onmouseout=function(e){
        isDraw = false;

    }
    btn.onclick=function(){
        //创建a标签
        var aDom=document.createElement("a");
        aDom.href=cas.toDataURL("image/jpeg",1);
//        aDom.href=cas.toDataURL("image/png",1);//默认 不能压缩
        aDom.download="abc";
        //触发a标签的点击
        aDom.click();
    }
</script>
</body>
</html>